{% extends "base.html" %}
  {% block content %}
  <div id="page-wrapper">
     <div class="row">
         <div class="col-lg-12">
             <h2 class="page-header">Manage File</h2>
         </div>
         <!-- /.col-lg-12 -->
     </div>
     <!-- /.row -->
     <div class="row">
         <div class="col-lg-12">
             <div class="panel panel-default">
                 <div class="panel-heading">
                     Manage File
                     <!-- begin action -->
                     <div class="btn-group" style="float:right">
                       <button type="button" class="btn btn-outline btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
                       Action <span class="caret"></span>
                       </button>
                       <ul class="dropdown-menu">
                         <li><a id="add_file" href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> | Add </a></li>
                         <li role="separator" class="divider"></li>
                         <li><a id="delete_file" href="#"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> | Delete </a></li>
                       </ul>
                     </div>
                     <!-- end action -->
                       <!-- begin modal  -->
                       <!-- add modal -->
                       <div id="add_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               <h4 class="modal-title" id="exampleModalLabel">Add</h4>
                             </div>
                             <div class="modal-body">
                               <form  class="form-horizontal" id="add_data" action="/files_manager/upload_file" method="POST" enctype="multipart/form-data">
                                 <fieldset>

                                   <div class="form-group" id="collapseOne1" class="panel-collapse collapse on">
                                      <div class="panel-body" style="padding:0px">

                                        <div class="form-group">
                                          <label class="col-sm-3 control-label" for="target_dir">Target Dir({{ base_dir }})</label>
                                          <div class="col-sm-8">
                                          <input class="form-control" type="text" id="target_dir" name="target_dir" placeholder="relative path of {{ base_dir }} and end with '/' "/></input>
                                          </div>
                                        </div>

                                        <div class="form-group">
                                           <label class="col-sm-3 control-label"></label>
                                           <div class="col-sm-4">
                                             <input type="file" name="file" /></input>
                                           </div> 
                                           <div class="col-sm-1">
                                             <input class="cancel"  type="button"  value="Cancel"/></input>
                                           </div> 
                                        </div>

                                        <div class="form-group">
                                           <label class="col-sm-3 control-label"></label>
                                           <div class="col-sm-4">
                                           <button id="addnew" form="upload" type="button" name="upload" value="upload" />Add New</button>
                                           <button id="upload_button" form="upload" type="button" name="upload" value="upload" />Upload</button>
                                           </div>
                                        </div>
                                      </div>
                                    </div>

                                 </fieldset>
                               </form>
                             </div>
                           </div>
                         </div>
                       </div>
                       <!-- end add modal -->

                       <!-- delete modal -->
                       <div id="delete_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               <h4 class="modal-title" id="exampleModalLabel">Are You Sure?</h4>
                             </div>
                             <div class="modal-body">
                               <form id="delete_data" class="form-horizontal" method="POST" action="/files_manager/del_file/">
                               <!-- jquery will append content here -->
                               </form>
                             </div>
                             <div class="modal-footer">
                               <button type="button" class="btn btn-outline btn-warning btn-xs" data-dismiss="modal">Close</button>
                               <button id="delete_commit" type="button" class="btn btn-outline btn-danger btn-xs" data-dismiss="modal" >Delete</button>
                             </div>
                           </div>
                         </div>
                       </div>
                       <!-- end delete -->
                       
                       <!-- checkbox error modal -->
                       <div id="checkbox_error_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-content">
                               <div class="modal-header">
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               </div>
                               <div class="modal-body">
                                 <h4 class="modal-title" id="checkbox_error">There is no item selected</h4>
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
                       <!-- end checkbox error modal-->

                       <!-- alert result modal -->
                       {% if results %}
                       <div id="result_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-content">
                               <div class="modal-header">
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                 <h4 class="modal-title" id="exampleModalLabel">Operation Result</h4>
                               </div>
                               <div class="modal-body">
                                 {% for result in results %}
                                 <h4 id="success" class="modal-title">{{ result }}</h4>
                                 {% endfor %}
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
                       {% endif %}
                       <!-- end alert result modal  -->
                <!-- end modal -->   



                 </div>
                 <!-- /.panel-heading -->
                 <div class="panel-body">
                     <div class="dataTable_wrapper">
                         <table id="datatable-demo" class="table table-striped table-bordered table-hover">
                             <thead>
                                 <tr>
                                    <th>
                                      <input id="CHKall" type="checkbox" name="CHKall" value="CHKall"></input>
                                    </th>
                                    <th>Type</th>
                                    <th>Size(Kb)</th>
                                    <th>Path</th>
                                 </tr>
                             </thead>
                             <tbody>
                                  {% if files %}
                                  {% for k,v in files.items %}
                                  <tr>
                                      {% load cut_list %}
                                      <td>
                                        <input  name="CHKlist" type="checkbox" value="{{ v | ListToStr:2 }}"></input>
                                      </td>
                                      <td>{{ v | ListToStr:0 }}</td>
                                      <td>{{ v | ListToStr:1 }}</td>
                                      {% if  "DIR" in v %}
                                      <td><a href="/files_manager/manage_file/?path={{ v | ListToStr:2 }}">{{ v | ListToStr:2 }}</a></td>
                                      {% else %}
                                      <td>{{ v | ListToStr:2 }}</td>
                                      {% endif %}
                                  <!--push variable path to view named del_file -->
                                  <input style="display:none" type="text" name="path" value="{{ v | ListToStr:2 }}"></input>
                                  </tr>
                                  {% endfor %}
                                  {% endif %}  
                                </tbody>



                             </tbody>
                         </table>
                     </div>
                     <!-- /.table-responsive -->
                 </div>
                 <!-- /.panel-body -->
             </div>
             <!-- /.panel -->
         </div>
         <!-- /.col-lg-12 -->
     </div>
     <!-- /.row -->
   </div>
        <!-- /#page-wrapper -->

  {% endblock %}
  {% block jquery%}

      <script type="text/javascript">
      //bind event
      $(document).on("click","input.cancel",function(){
          $(this).parent().parent().remove()
      });
      // end bind event

      $(document).ready(function(){
        //全选或全不选 
        $("#CHKall").click(function(){
            if(this.checked){    
                $("input[name='CHKlist']").prop("checked", true);   
            }else{    
                $("input[name='CHKlist']").prop("checked", false); 
            }    
         });  
        // end slelect all

        //data table
        $('#datatable-demo').DataTable( {
        "order": [[ 1, "asc" ]],
        "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] }],    
        } );
        // end data table

        // add //
        $("#add_file").click(function(){
            $('#add_modal').modal('show')
            
        });
        // file upload
        $('#addnew').click(function (){
            $('#addnew').parent().parent().before('\
                                 <div  class="form-group">\
                                    <label class="col-sm-3 control-label"></label>\
                                    <div class="col-sm-4">\
                                      <input type="file" name="file" /></input>\
                                    </div>\
                                    <div class="col-sm-2">\
                                      <input class="cancel"  type="button" value="Cancel" /></input>\
                                    </div>\
                                 </div>\
                                 ')
        })     


        $('#upload_button').click(function(){
            $('#add_data').submit()
        });
        // end add //


        // delete //
        $("#delete_file").click(function(){
           var ids=[];
           $('input[name="CHKlist"]:checked').each(function(){
               var id=$(this).val();
               //tr_index = $(this).parent().parent().index()
               //td_name = $(this).parent().parent().children("td:eq(2)").text()
               ids.push(id);
           }); 
           if (ids.length >0)
               {
               $("#delete_data").empty()
               for (i in ids){     
                   $("#delete_data").append(
                       '<div class="form-group">\
                       <label class="col-sm-2 control-label">Path: </label>\
                         <div class="col-sm-8">\
                           <input  readonly name="path" value="'+ ids[i] +'" type="text" class="form-control"></input>\
                         </div>\
                       </div>\
                       <br>'
                       );
                   };
                 $('#delete_modal').modal('show')
               }
             else 
                {
                   $('#checkbox_error_modal').modal('show')
                }
           $("#delete_commit").click(function(){
                 $("#delete_data").submit()
             });
      });
      // end delete //
  
    $('#result_modal').modal('show')

    });

    </script>
    {% endblock %}
